
<div class="modal fade" id="modalAddMedia" tabindex="-1" role="dialog" aria-labelledby="modalAddMedia" aria-hidden="true">
  <div class="modal-dialog modal-lg">
     <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">   
           <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
           </button>
           <h4 class="modal-title" id="myModalLabel">
              <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-circle-o"> </i> 上传媒介
           </h4>
        </div>
        
        <!-- Modal Body -->
        <div class="modal-body">
           <form id="modalAddMediaForm" class="form-horizontal form-label-left" method="POST" novalidate>
              <div class="x_panel">
                 <div class="x_content">
                    <input id="id" hidden/>
                    <div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="url">URL <span class="required">*</span>
                       </label>
                       <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="url" class="form-control col-md-7 col-xs-12" parsley-trigger="change" parsley-type="url"  name="url" placeholder="http://" required="required" type="text">
                       </div>
                    </div>
                 
                    <div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">名称 <span class="required">*</span>
                       </label>
                       <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="name" class="form-control col-md-7 col-xs-12"  pattern="[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 60]" name="name" placeholder="Media name" data-parsley-trigger="change" required type="text">
                       </div>
                    </div>
                                         
                    <div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="kind">类型 <span class="required">*</span>
                       </label>
                       <div class="col-md-6 col-xs-12">
                          <select id="kind" name="kind" class="form-control" required>
                             <option value="">选择..</option>
                             <option value="iso">ISO CD/DVD</option>
                             <option value="floppy">软件</option>
                             <option value="qcow2">Qcow2</option>
                          </select>
                       </div>
                    </div>

                    <!--<div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
                       </label>
                       <div class="col-md-6 col-sm-6 col-xs-12">
                          <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="4,40" name="name" placeholder="New desktop name" required="required" type="text">
                       </div>
                    </div>-->
                    
                    <div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="description">说明
                       </label>
                       <div class="col-md-6 col-sm-6 col-xs-12">
                          <textarea id="textarea" name="description" class="form-control col-md-7 col-xs-12"></textarea>
                       </div>
                    </div>

                    <input id="hypervisors_pools" name="hypervisors_pools" value="default" hidden/> 
                    <!--<div class="item form-group">
                       <label class="control-label col-md-3 col-sm-3 col-xs-12" for="description">Hypervisor Pool
                       </label>
                       <div class="col-md-6 col-sm-6 col-xs-12">
                          <select class="form-control" id="hypervisors_pools" name="hypervisors_pools">
                             <option value="default" selected="default">
                                Default
                             </option>
                          </select>
                       </div>
                    </div>-->
                 </div>
              </div>
              <div id="alloweds-add">
                 {% include '/snippets/alloweds_add.html' %}
              </div>
           </form>
        </div>
        <!-- Modal Footer -->
        <div class="modal-footer">
           <ul class="nav navbar-left panel_toolbox">
              <li><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></li>
           </ul>
           <ul class="nav navbar-right panel_toolbox">
              <li><button id="send" type="button" class="btn btn-success">开始下载</button></li>
           </ul>
        </div>
     </div>
  </div>
</div>

<style>
    [id^=modal_add_] .selected {
       background-color: #e0f1af !important;
   }

   .my-error{
     margin-top: 5px;
     color: #B94A48 !important;
     background-color: #F2DEDE !important;
     border: 1px solid #EED3D7 !important;
     padding: 10px;
   }           
</style>

<div class="modal fade" id="modalAddFromMedia" tabindex="-1" role="dialog" aria-labelledby="modalAddFromMedia" aria-hidden="true" >
  <div class="modal-dialog modal-lg" >
     <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
           </button>
           <h4 class="modal-title" id="myModalLabel">
              <i class="fa fa-plus fa-1x"> </i> <i class="fa fa-circle-o"> </i> 从媒体创建桌面
           </h4>
        </div>
        <!-- Modal Body -->
        <div class="modal-body">
           <form id="modalAdd" class="" data-parsley-validate>
              <div class="row">
                 <div class="col-md-12 col-sm-12 col-xs-12">
                    <div id="modalMedia" class="x_panel">
                       <div class="x_title">
                          <h4><i class="fa fa-circle-o" aria-hidden="true"></i> 选定的 ISO/软盘/HDD 从中启动</h4>
                          <div class="clearfix"></div>
                      </div>
                       <div id="datatables-media-error-status"></div>
                       <input  id="media" name="media" type="hidden" required>
                       <input  id="kind" name="kind" type="hidden" required>
                       <b><label  id="media_name" name="media_name"></label></b>
                       <i>(<label  id="media_size" name="media_size"></label>)</i>

                       <!--<div class="item form-group">
                             <label class="control-label col-md-3 col-sm-3 col-xs-12" for="add_virtio_iso">Windows install?
                             </label>
                             <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="checkbox">
                                   <label class="">
                                   <div class="icheckbox_flat-green" style="position: relative;">
                                      <input type="checkbox" id="add_virtio_iso" name="add_virtio_iso" class="flat"  style="position: absolute; opacity: 0;">
                                      <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                                      </ins>
                                   </div> It is a Windows install media
                                   </label>
                                </div> 
                             </div>
                             <div class="col-md-6 col-sm-6 col-xs-12">
                                <div class="checkbox">
                                   <label class="">
                                   <div class="icheckbox_flat-green" style="position: relative;">
                                      <input type="checkbox" id="add_virtio_fd" name="add_virtio_fd" class="flat"  style="position: absolute; opacity: 0;">
                                      <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;">
                                      </ins>
                                   </div> Attach Windows drivers
                                   </label>
                                </div> 
                    </div>
                             <table id="modal_add_media" class="table table-striped " cellspacing="0" width="100%"  style="margin-top: 0px;">
                                <thead>
                                   <tr>
                                      <th>Name</th>
                                   </tr>
                                </thead>
                                <tbody>
                                </tbody>
                             </table>
                          </div>-->
                    </div>
                 </div>
                 <div class="col-md-12 col-sm-12 col-xs-12">
                    <div id="modalData" class="x_panel" >
                       <div class="x_title">
                          <h4><i class="fa fa-info-circle" aria-hidden="true"></i> 桌面名称和描述</h4>
                          <div class="clearfix"></div>
                      </div>
                       <div class="x_content">
                          <label for="name">名称<span class="required"> *</span></label>
                          <input type="text" id="name" class="form-control" name="name" pattern="[-_àèìòùáéíóúñçÀÈÌÒÙÁÉÍÓÚÑÇ .a-zA-Z0-9]+$" data-parsley-length="[4, 40]" name="name" placeholder="New desktop name" data-parsley-trigger="change" required />
                          <label for="message">说明</label>
                          <textarea id="description" class="form-control" name="description"></textarea>                              
                       </div>
                    </div>
                    <div class="x_panel">
                       <div class="x_title">
                          <h4><i class="fa fa-gear" aria-hidden="true"></i> 调整操作系统模板硬件</h4>
                          <div class="clearfix"></div>
                      </div>
                       <div class="x_content">
                          {% include '/snippets/domain_hardware_disksize_edit.html' %}
                       </div>
                    </div>
                    <div id="modalInstall" class="x_panel">
                       <div class="x_title">
                          <h4>选择操作系统硬件模板</h4>
                          <div class="clearfix"></div>
                       </div>
                       <div class="x_content">
                          <div id="datatables-install-error-status"></div>
                          <input  id="install" name="install" type="hidden" required>
                          <table id="modal_add_install" class="table table-hover" cellspacing="0" width="100%"  style="margin-top: 0px;">
                             <thead>
                                   <tr>
                                   <th>名称</th>
                                   <th>版本</th>
                                   </tr>
                             </thead>
                             <tbody>
                             </tbody>
                          </table>
                       </div>
                    </div>
                 </div>
              </div>
           </form>
        </div>
        <!-- Modal Footer -->
        <div class="modal-footer">
              <ul class="nav navbar-left panel_toolbox">
                 <li><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></li>
              </ul>
              <ul class="nav navbar-right panel_toolbox">
                 <li><button id="send" type="button" class="btn btn-success">创建桌面</button></li>
              </ul>
        </div>
     </div>
  </div>
</div>

<div class="modal fade" id="modalDeleteMedia" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
       <div class="modal-content">
           <!-- Modal Header -->
           <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">
                   <span aria-hidden="true">&times;</span>
                   <span class="sr-only">关闭</span>
               </button>
               <h4 class="modal-title">
                   <i class="fa fa-delete fa-1x"> </i> <i class="fa fa-user"> </i> 删除桌面
               </h4>
           </div>

           <!-- Modal Body -->
           <div class="modal-body">

               <form id="modalDeleteMediaForm" class="form-horizontal form-label-left">
                   <input id="id" hidden/>
                   <div class="x_panel">
                       <div class="x_content">
                           <h4 style="color: red"><i class="fa fa-warning"> </i> 该媒体将从这些桌面中删除。 如果它们正在运行，所有这些都将停止</h4>
                           <div class="item form-media">
                               <table id="table_modal_media_delete" class="table">
                                   <thead>
                                     <tr>
                                       <th>类型</th>
                                       <th>拥有者/id</th>
                                       <th>名称</th>
                                     </tr>
                                   </thead>
             
                                   <tbody>
                                   </tbody>
                                 </table>
                           </div>
                       </div>
                   </div>

               </form>
           </div>
           <!-- Modal Footer -->
           <div class="modal-footer">
               <ul class="nav navbar-left panel_toolbox">
                   <li><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></li>
               </ul>
               <ul class="nav navbar-right panel_toolbox">
                   <li><button id="send" type="button" class="btn btn-danger">删除媒体</button></li>
               </ul>
           </div>
       </div>
   </div>
</div>
